import {useSelector, useDispatch} from "react-redux";
import {InputNumber, Button} from "antd";
import {useState} from "react";

const Page2 = () => {

  const dispatch = useDispatch()
  const [newNum,setNewNum] = useState(0)

  const {sArr} = useSelector((state:RootState)=>({
    sArr:state.sArr
  }))

  const numChange = (num:number | string | null)=>{
    let nNum = Number(num)
    setNewNum(nNum)
  }

  const addArr = (event:any) => {
    console.log(newNum,event)
    dispatch({type:'sArrPush',num:newNum})
  }

  return(
    <div className='page2'>
      <p>这是page2页面</p>
      <div className='inputNumBox' style={{display: 'flex',alignItems:'center'}}>
        <InputNumber onChange={numChange}></InputNumber>
        <Button value='sArrPush' onClick={addArr}>添加</Button>
      </div>
      <div>{sArr.map(
        (ele:number,index:number) => {
          return <span key={index}>{ele},</span>
        }
      )}</div>
    </div>
  )
}

export default Page2